<template>
    <div class="move">
        <div class="move-left">
            今日打卡
        </div>
        <div class="move-img">
            <img :src="img1" alt="">
        </div>
        <div class="move-text">
            MG.3
        </div>
        <div class="move-right">
            <div class="move-block"></div>
            <p class="p1">再锻炼100分钟可升级为MG.4</p>
        </div>
    </div>
</template>
<script>
export default {
    name:'MovementComponent',
    data(){
        return{
            img1:""
        }
    },
    created(){
        let ulrTemp="assets/img/img1.png";
        this.img1=require("@/"+ulrTemp)
    }
}
</script>
<style lang="less" scoped>
.move{
    width: 100%;
    height: 110px;
    background-color:#Fddf05;
    .move-left{
        width: 70px;
        height: 40px;
        background-color: #181818;
        float: left;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        color:#Fddf05;
        margin-top: 25px;
        margin-left: 10px;
    }
    .move-img{
        width: 50px;
        height: 50px;
        float: left;
        margin-top: 20px;
        margin-left: 10px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .move-text{
        font-size: 20px;
        font-weight: 700;
        margin-left: 10px;
        float: left;
        margin-top: 30px;
        color:#171818;
    }
    .move-right{
        width: 150px;
        background-color: #fff;
        float: left;
        height: 4px;
        margin-top: 40px;
        margin-left: 10px;
        position: relative;
        .move-block{
            width: 100px;
            height: 4px;
            position: absolute;
            top:0;
            left: 0;
            background-color: #171818;
        }
        .p1{
            color:#171818;
            font-size: 14px;
            font-weight: 500;
            margin-top: 10px;
        }
    }
}  
</style>